import {useEffect, useState} from "react";
import TopicQuery from "../components/topic/topicQuery";
import HttpRequestUtils from "../utils/HttpRequestUtils";
import TopicOperate from "../components/topic/topicOperate";
import TopicList from "../components/topic/topicList";
import gengzpMqApis from "../apis/apis";
import {message} from "antd";

/**
 * topic主题管理页面
 */
const Topic = () => {

    // antd的message
    const [messageApi, contextHolder] = message.useMessage();

    // 分页查询主题对象信息
    const [queryTopicInfo, setQueryTopicInfo] = useState({
        topicList: [], //主题列表
        total: 0, //主题总条数
        totalPage: 0, //主题总页数
    });

    // 分页查询条件
    const [pageQueryParam, setPageQueryParam] = useState({
        pageNum: 1,
        pageSize: 10,
        topicName: "",
        topicDescription: ""
    });

    /**
     * 页面打开时自动执行的钩子函数
     */
    useEffect(() => {
        pageQueryTopic();
    }, []);

    /**
     * 分页查询topic
     */
    const pageQueryTopic = () => {
        HttpRequestUtils.post(gengzpMqApis.pageQueryTopic, {
                pageNum: pageQueryParam.pageNum,
                pageSize: pageQueryParam.pageSize,
                topic: pageQueryParam.topicName,
                description: pageQueryParam.topicDescription
            }
        ).then(res => {
            if (res.code === 200) {
                setQueryTopicInfo({
                    topicList: res.data.records,
                    total: res.data.total,
                    totalPage: res.data.pageCount
                })
            } else {
                messageApi.error(res.message);
            }
        }).catch(err => {
            messageApi.error("查询topic失败: ", err.message);
        });
    }

    return (
        <div>
            {contextHolder}

            {/* 分页查询条件部分 */}
            <div>
                <TopicQuery
                    queryTopicInfo={queryTopicInfo}
                    setQueryTopicInfo={setQueryTopicInfo}
                    pageQueryParam={pageQueryParam}
                    setPageQueryParam={setPageQueryParam}
                />
            </div>

            {/* 页面操作部分 */}
            <div>
                <TopicOperate
                    queryTopicInfo={queryTopicInfo}
                    setQueryTopicInfo={setQueryTopicInfo}
                    pageQueryParam={pageQueryParam}
                    setPageQueryParam={setPageQueryParam}
                    pageQueryTopic={pageQueryTopic}
                />
            </div>

            {/* 列表展示部分 */}
            <div>
                <TopicList
                    queryTopicInfo={queryTopicInfo}
                    pageQueryTopic={pageQueryTopic}
                />
            </div>

        </div>
    )
}

export default Topic;